<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry List/Menu Validation Sample</title>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<link href="../../widgets/selectvalidation/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<script src="../../widgets/selectvalidation/SpryValidationSelect.js" type="text/javascript"></script>
<style type="text/css">
.tablecontainer {
	width: 600px;
	clear: both;
}
.tablecontainer select {
	margin-top: 7px;
}
.tablecell {
	width: 33%;
	float: left;
	height: 67px;
}
.submitContainer {
	clear: both;
}
.selectRequiredMsg1, .selectInvalidMsg1 {
	display: none;
}
#validstate1.selectRequiredState .selectRequiredMsg, #validstate1.selectInvalidState .selectInvalidMsg {
	display: inline;
	text-align: left;
	color: blue;
	border: 1px solid blue;
	font-size: 13px;
}
#validstate2.selectRequiredState select, #validstate2.selectInvalidState select {
	background-color: #FF9F9F;
	border: 1px solid red;
}
#validstate2.selectInvalidState {
	color: blue;
	font-size: 13px;
}
select {
	margin-bottom: 5px;
}
</style>
</head>
<body>
<h3>Spry List/Menu Validation Samples</h3>
<p>This page demonstrates the capabilities of the Spry List/Menu Validation Widget.</p>
<hr />
<!-- 

First Example - Different validation moments - Change, Blur, Submit

-->
<p>This is an example of a Spry List/Menu Validation  widget. <br />
  There are three
  validation techniques: validation can occur as you go (Change), when the
  select input looses focus (Blur) or only when the form is submitted (Submit).
  The Submit validation  always occurs, regardless of the other options chosen.</p>
<form id="form1" name="form1" method="get" action="SelectValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <div class="tabletitle">Change - Submit</div>
      <span id="validsel1">
      <select name="StateList1" id="select1" tabindex="1">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="Delaware">Delaware</option>
        <option value="Florida">Florida</option>
        <option value="Georgia">Georgia</option>
        <option value="Hawaii">Hawaii</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Louisiana">Louisiana</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="Utah">Utah</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Blur - Submit</div>
      <span id="validsel2">
      <select name="StateList2" id="select2" tabindex="2">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="Delaware">Delaware</option>
        <option value="Florida">Florida</option>
        <option value="Georgia">Georgia</option>
        <option value="Hawaii">Hawaii</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Louisiana">Louisiana</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="Utah">Utah</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> </span> </div>
    <div class="tablecell">
      <div class="tabletitle">Submit</div>
      <span id="validsel3">
      <select name="StateList3" id="select3" tabindex="3">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="Delaware">Delaware</option>
        <option value="Florida">Florida</option>
        <option value="Georgia">Georgia</option>
        <option value="Hawaii">Hawaii</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="Louisiana">Louisiana</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="Utah">Utah</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> </span> </div>
    <br style="clear:both;" />
  </div>
  <div class="submitContainer">
    <input type="submit" name="SubmitForm1" value="Submit" />
  </div>
</form>
<script type="text/javascript">
<!--
var validsel1 = new Spry.Widget.ValidationSelect("validsel1", {validateOn:["change"]});
var validsel2 = new Spry.Widget.ValidationSelect("validsel2", {validateOn:["blur"]});
var validsel3 = new Spry.Widget.ValidationSelect("validsel3");
//-->
</script>
<hr />
<!-- 

Second Example - Invalid values

-->
<p>&nbsp;</p>
<p>The Spry List/Menu Validation widget allows you to specify an invalid value,
  that will not be submitted if the user selects it. This is useful when you
  want to use visual separators between the options in the widget. The invalid value is specified in the constructor, in this case, it is &quot;-&quot;. </p>
<form id="form2" name="form2" method="get" action="SelectValidationSample.html">
  <div class="tablecontainer">
    <div class="tablecell">
      <div class="tabletitle">Change - Submit</div>
      <span id="validsel4">
      <select name="StateList4" id="select4" tabindex="1">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="-">------------------</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="-">------------------</option>
        <option value="Delaware">Delaware</option>
        <option value="-">------------------</option>
        <option value="Florida">Florida</option>
        <option value="-">------------------</option>
        <option value="Georgia">Georgia</option>
        <option value="-">------------------</option>
        <option value="Hawaii">Hawaii</option>
        <option value="-">------------------</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="-">------------------</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="-">------------------</option>
        <option value="Louisiana">Louisiana</option>
        <option value="-">------------------</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="-">------------------</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="-">------------------</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="-">------------------</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="-">------------------</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="-">------------------</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="-">------------------</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="-">------------------</option>
        <option value="Utah">Utah</option>
        <option value="-">------------------</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="-">------------------</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> <span class="selectInvalidMsg">Please select a valid item.</span></span> </div>
    <div class="tablecell">
      <div class="tabletitle">Blur - Submit</div>
      <span id="validsel5">
      <select name="StateList5" id="select5" tabindex="2">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="-">------------------</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="-">------------------</option>
        <option value="Delaware">Delaware</option>
        <option value="-">------------------</option>
        <option value="Florida">Florida</option>
        <option value="-">------------------</option>
        <option value="Georgia">Georgia</option>
        <option value="-">------------------</option>
        <option value="Hawaii">Hawaii</option>
        <option value="-">------------------</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="-">------------------</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="-">------------------</option>
        <option value="Louisiana">Louisiana</option>
        <option value="-">------------------</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="-">------------------</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="-">------------------</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="-">------------------</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="-">------------------</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="-">------------------</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="-">------------------</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="-">------------------</option>
        <option value="Utah">Utah</option>
        <option value="-">------------------</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="-">------------------</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> <span class="selectInvalidMsg">Please select a valid item.</span> </span></div>
    <div class="tablecell">
      <div class="tabletitle">Submit</div>
      <span id="validsel6">
      <select name="StateList6" id="select6" tabindex="3">
        <option value="">Please choose your state</option>
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        <option value="-">------------------</option>
        <option value="California">California</option>
        <option value="Colorado">Colorado</option>
        <option value="Connecticut">Connecticut</option>
        <option value="-">------------------</option>
        <option value="Delaware">Delaware</option>
        <option value="-">------------------</option>
        <option value="Florida">Florida</option>
        <option value="-">------------------</option>
        <option value="Georgia">Georgia</option>
        <option value="-">------------------</option>
        <option value="Hawaii">Hawaii</option>
        <option value="-">------------------</option>
        <option value="Idaho">Idaho</option>
        <option value="Illinois">Illinois</option>
        <option value="Indiana">Indiana</option>
        <option value="Iowa">Iowa</option>
        <option value="-">------------------</option>
        <option value="Kansas">Kansas</option>
        <option value="Kentucky">Kentucky</option>
        <option value="-">------------------</option>
        <option value="Louisiana">Louisiana</option>
        <option value="-">------------------</option>
        <option value="Maine">Maine</option>
        <option value="Maryland">Maryland</option>
        <option value="Massachusetts">Massachusetts</option>
        <option value="Michigan">Michigan</option>
        <option value="Minnesota">Minnesota</option>
        <option value="Mississippi">Mississippi</option>
        <option value="Missouri">Missouri</option>
        <option value="Montana">Montana</option>
        <option value="-">------------------</option>
        <option value="Nebraska">Nebraska</option>
        <option value="Nevada">Nevada</option>
        <option value="New Hampshire">New Hampshire</option>
        <option value="New Jersey">New Jersey</option>
        <option value="New Mexico">New Mexico</option>
        <option value="New York">New York</option>
        <option value="North Carolina">North Carolina</option>
        <option value="North Dakota">North Dakota</option>
        <option value="-">------------------</option>
        <option value="Ohio">Ohio</option>
        <option value="Oklahoma">Oklahoma</option>
        <option value="Oregon">Oregon</option>
        <option value="-">------------------</option>
        <option value="Pennsylvania">Pennsylvania</option>
        <option value="-">------------------</option>
        <option value="Rhode Island">Rhode Island</option>
        <option value="-">------------------</option>
        <option value="South Carolina">South Carolina</option>
        <option value="South Dakota">South Dakota</option>
        <option value="-">------------------</option>
        <option value="Tennessee">Tennessee</option>
        <option value="Texas">Texas</option>
        <option value="-">------------------</option>
        <option value="Utah">Utah</option>
        <option value="-">------------------</option>
        <option value="Vermont">Vermont</option>
        <option value="Virginia">Virginia</option>
        <option value="-">------------------</option>
        <option value="Washington">Washington</option>
        <option value="West Virginia">West Virginia</option>
        <option value="Wisconsin">Wisconsin</option>
        <option value="Wyoming">Wyoming</option>
      </select>
      <br/>
      <span class="selectRequiredMsg">Please select an item.</span> <span class="selectInvalidMsg">Please select a valid item.</span> </span> </div>
    <br style="clear:both;" />
  </div>
  <div class="submitContainer">
    <input type="submit" name="SubmitForm2" value="Submit" />
  </div>
</form>
<script type="text/javascript">
<!--
var validsel4 = new Spry.Widget.ValidationSelect("validsel4", {validateOn:["change"], invalidValue:"-"});
var validsel5 = new Spry.Widget.ValidationSelect("validsel5", {validateOn:["blur"], invalidValue:"-"});
var validsel6 = new Spry.Widget.ValidationSelect("validsel6", {invalidValue:"-"});
//-->
</script>
<hr />
<!--

	Third Example - Changing the error messages

-->
<p>&nbsp;</p>
<p>The following example shows a customized version of the error messages.
  The error messages for each restriction are located in the page so you may easily
  change them to a fit your needs.</p>
<p>Choose your state:</p>
<form id="form3" name="form3" method="get" action="SelectValidationSample.html">
  <span id="validsel7">
  <select name="select7" id="select7">
    <option value="">Please choose your state</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="-">------------------</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="-">------------------</option>
    <option value="Delaware">Delaware</option>
    <option value="-">------------------</option>
    <option value="Florida">Florida</option>
    <option value="-">------------------</option>
    <option value="Georgia">Georgia</option>
    <option value="-">------------------</option>
    <option value="Hawaii">Hawaii</option>
    <option value="-">------------------</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="-">------------------</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="-">------------------</option>
    <option value="Louisiana">Louisiana</option>
    <option value="-">------------------</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="-">------------------</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakota</option>
    <option value="-">------------------</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="-">------------------</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="-">------------------</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="-">------------------</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="-">------------------</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="-">------------------</option>
    <option value="Utah">Utah</option>
    <option value="-">------------------</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="-">------------------</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
  </select>
  <span class="selectInvalidMsg">Please select a valid state.</span> <span class="selectRequiredMsg">Please select your state.</span> </span> <br />
  <input type="submit" name="SubmitForm3" value="Submit" />
</form>
<script type="text/javascript">
<!--
var validsel7 = new Spry.Widget.ValidationSelect("validsel7", {validateOn:["blur", "change"], invalidValue:"-"});
//-->
</script>
<hr />
<!--

	Fourth Example - Changing the error messages location

-->
<p>&nbsp;</p>
<p>The following example shows how the error messages can be displayed in a different location than the select container.</p>
<p>Choose your state:</p>
<form id="form30" name="form30" method="get" action="SelectValidationSample.html">
  <span id="validselect4">
  <select name="selectvalid4" id="selectvalid4">
    <option value="">Please choose your state</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="-">------------------</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="-">------------------</option>
    <option value="Delaware">Delaware</option>
    <option value="-">------------------</option>
    <option value="Florida">Florida</option>
    <option value="-">------------------</option>
    <option value="Georgia">Georgia</option>
    <option value="-">------------------</option>
    <option value="Hawaii">Hawaii</option>
    <option value="-">------------------</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="-">------------------</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="-">------------------</option>
    <option value="Louisiana">Louisiana</option>
    <option value="-">------------------</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="-">------------------</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakota</option>
    <option value="-">------------------</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="-">------------------</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="-">------------------</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="-">------------------</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="-">------------------</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="-">------------------</option>
    <option value="Utah">Utah</option>
    <option value="-">------------------</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="-">------------------</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
  </select>
  <span class="selectInvalidMsg">Please select a valid state.</span> <span class="selectRequiredMsg">Please select your state.</span> </span> <br />
<span id="additionalErrorZone">
	<span>Errors:</span>
	<span class="selectInvalidMsg">Please select a valid state.</span> <span class="selectRequiredMsg">Please select your state.</span><br />
</span>
<br />
  <input type="submit" name="SubmitForm4" value="Submit" />
</form>
<script type="text/javascript">
<!--
var validsel30 = new Spry.Widget.ValidationSelect("validselect4", {validateOn:["blur", "change"], invalidValue:"-", additionalError: 'additionalErrorZone'});
//-->
</script>
<hr />

<p>
  <!--
	
	Fourth Example - Styling the error messages

-->
This is an example showing how to style the error messages, using a css class
similar to the one from the SpryValidationSelect.css file.
</p>
<p>Choose your state:</p>
<form name="form4" method="get" action="SelectValidationSample.html">
  <span id="validstate1">
  <select name="state1" id="state1">
    <option value="">Please choose your state</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="-">------------------</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="-">------------------</option>
    <option value="Delaware">Delaware</option>
    <option value="-">------------------</option>
    <option value="Florida">Florida</option>
    <option value="-">------------------</option>
    <option value="Georgia">Georgia</option>
    <option value="-">------------------</option>
    <option value="Hawaii">Hawaii</option>
    <option value="-">------------------</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="-">------------------</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="-">------------------</option>
    <option value="Louisiana">Louisiana</option>
    <option value="-">------------------</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="-">------------------</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakota</option>
    <option value="-">------------------</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="-">------------------</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="-">------------------</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="-">------------------</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="-">------------------</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="-">------------------</option>
    <option value="Utah">Utah</option>
    <option value="-">------------------</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="-">------------------</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
  </select>
  <span class="selectInvalidMsg">Please select a valid state.</span> <span class="selectRequiredMsg">Please select your state.</span> </span> <br />
  <input type="submit" name="SubmitForm4" value="Submit" />
</form>
<script type="text/javascript">
<!--
var validstate1 = new Spry.Widget.ValidationSelect("validstate1", {validateOn:["blur", "change"], invalidValue:"-"});
//-->
</script>
<hr />
<p>&nbsp;</p>
<p>You can change the widget container to use directly the list/menu label,
  and not use any error messages. </p>
<form name="form5" method="get" action="SelectValidationSample.html">
  <label for="state2" id="validstate2">Choose your state:<br />
  <select name="state2" id="state2">
    <option value="">Please choose your state</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="-">------------------</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="-">------------------</option>
    <option value="Delaware">Delaware</option>
    <option value="-">------------------</option>
    <option value="Florida">Florida</option>
    <option value="-">------------------</option>
    <option value="Georgia">Georgia</option>
    <option value="-">------------------</option>
    <option value="Hawaii">Hawaii</option>
    <option value="-">------------------</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="-">------------------</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="-">------------------</option>
    <option value="Louisiana">Louisiana</option>
    <option value="-">------------------</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="-">------------------</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakota</option>
    <option value="-">------------------</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="-">------------------</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="-">------------------</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="-">------------------</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="-">------------------</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="-">------------------</option>
    <option value="Utah">Utah</option>
    <option value="-">------------------</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="-">------------------</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
  </select>
  </label>
  <br />
  <input type="submit" name="SubmitForm5" value="Submit" />
</form>
<script type="text/javascript">
<!--
var validstate2 = new Spry.Widget.ValidationSelect("validstate2", {validateOn:["blur", "change"], invalidValue:"-"});
//-->
</script>
</body>
</html>
